$('form').on('submit', function (e) {//提交事件
    e = e || window.event
    e.preventDefault() //阻止表单默认action动作    
    console.log(123);

    let text = $('.submit').html()    
    let isName = checkUsernameNall()
    let isPass = checkpasswordNall()
    
    console.log(text,'登录还是注册');

    if (isName && isPass) {//非空验证全部通过则执行以下代码
        if (text == '登录') {
            //调用localstorage
            let userStr = localStorage.getItem('user')
            let user = JSON.parse(userStr)        

            console.log(user);
            if ($('.username').val() == user.username && $('.password').val() == user.password) {
                   location.href = '../pages/index.html' 
            } else {
                $('.usernamep').html('用户名或密码错误')   
                $('.passwordp').html('用户名或密码错误')   
                
            }


        }
        if (text == '注册') {
            let ispasspower = checkpasswordVerify()
            if (ispasspower) {
                let user = {
                    username: $('.username').val(),
                    password: $('.password').val(),
                }
                localStorage.setItem('user', JSON.stringify(user))
                alert('注册成功，请登录')
            }
        }
        
    }
})

//失去焦点事件
$('.username').on('blur', function () {
    checkUsernameNall()//用户名非空验证    
})

$('.password').on('blur', function () {
    checkpasswordNall()//密码非空验证    
})


//用户名非空验证
function checkUsernameNall() {
    if ($('.username').val() == '') {
        $('.usernamep').html('请输入账号')   
        $('.username').css('background','#ffd4d1')
        return false
    } else {
        $('.usernamep').html('')  
        $('.username').css('background','#f5f5f5')
        return true
    }
}

//密码非空验证
function checkpasswordNall() {
    if ($('.password').val() == '') {
        $('.passwordp').html('请输入登录密码')   
        $('.password').css('background','#f5f5f5')
        
        return false
    } else {
        $('.passwordp').html ('')  
        return true
    }
}

//密码强度验证
function checkpasswordVerify() {
    let passwordValue = $('.password').val()
    let reg = /^[A-Z][0-9a-zA-Z]{6,}\d/
    if (reg.test(passwordValue) == false) {
        $('.passwordp').html('大写字母开头， 必须是数字字母组合， 至少8位')
        $('.password').css('background','#ffd4d1')
        return false
    } else {
        $('.passwordp').html('')  
        $('.password').css('background','#f5f5f5')
        return true
    }
}



function loginOrEnroll() {
    $('.loginOrEnroll').on('click','h2', function () {
        let text = $(this).html()
        console.log(text);

        let tab = `
        <input type="text" name="username" placeholder="邮箱/手机号码/ID" class="username">
                    <p class="usernamep"></p>
                    <input type="text" name="password" placeholder="密码" class="password">
                    <p class="passwordp"></p>
                    <div class=".clearfix"><input type="checkbox" class="checkbox fl"></input>
                        <p>已阅读并同意账号<span>&nbsp;用户协议&nbsp;</span>和<span>&nbsp;隐私政策&nbsp;</span></p>
                    </div>
                    <button type="submit" class="submit">${text}</button>
                    <div class="other clearfix">
                        <p class="fl"><a href="#">忘记密码？</a></p>
                        <p class="fr"><a href="#">手机号登录</a></p>
                    </div>
                    <div class="buttom">
                        <h3>其他方式登录</h3>
                        <div class="img">
                            <a href="#"> <span class="iconfont icon-zhifubao"></span></a>
                            <a href="#"><span class="iconfont icon-weixin"></span></a>
                            <a href="#"><span class="iconfont icon-qq"></span></a>
                            <a href="#"><span class="iconfont icon-weibo-copy"></span></a>
                        </div>
                    </div>
        `
        $('.inner').html(tab)
        console.log('已执行');
   })
}

loginOrEnroll()
